<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>当当图书</title>
</head>
<style type="text/css">
    body {
        padding: 10px 40px;/*内边距*/
        width: 960px;
        margin: 0px auto;/*居中*/
    }
    .head{
       
        height: 60px;/*顶部位置高度*/
    }
    .head-left {
        float: left;/*向左浮动*/
        margin: 0px 10px; /*外边距*/
        margin-top: 30px;
        
    }
    
    .head-all-right {
        width: 30%;/*右上角边框宽度*/
        float: right;/*向右浮动*/
        margin-right: 10px;/*右外边距*/
       
    }
    
    .sanzhekuang {
        height: 35px;
        background-color: aliceblue;
    }
    
    .head-right {
        margin: 8px 1px; /*设置字体在右上角边框中的位置*/
    }
    
    .head-right a {
        text-decoration: none; /*去除下划线*/
        color: black;
        
    }
    
    .debk {
        clear:both;
        padding: 0px 10px;
        margin-top: 10px;/*设置边框位置*/
    }
    
    .dsbk {
        clear: left;
        margin-top: 10px;/*设置距离*/
    }
    
    .gexiang {
        background-color: orangered;/*第二行边框的属性*/
        height: 35px;
    }
    
    .zdbk {
       
        border: solid;
        border-color: aquamarine;
        height: 400px;
    }
    
    .footer {
        text-align: center;/*设置最下方的内容为居中位置*/
    }
    
    .debk .pinzhong {
        float: left;
        width: 4%;
        margin: 10px;
        font-size: 5px;
    }
    
    .debk .pinzhong a {/*设置改变框中属性*/
        text-decoration: none;
        padding: 5px;
        color: white;
    }
    
    .zdbk {
        margin-top: 10px;
        margin-bottom: 20px;
        margin-left: 1px;
        
    }
    
    .zdbk2 {
        margin-left: 10px; /*book-01.jpg的位置*/
        height: 300px;
        background: url(img/book-01.jpg);
        background-repeat: no-repeat;
    }
     
    .zdbk .book1 .neirong{/*设置第一本书中文字的属性*/
        padding-top: 150px;
        padding-right: 100px;
        font-size: 10px;
        text-decoration: none;
    }
    .zdbk .book1 .neirong a{/*设置第一本书书名字体颜色*/
        color: blue;
    }
    
 
    .book2{
        
        height: 130px;
        margin: 70px 5px;
    }
    .book2 .four a{/*第二本书的文字属性（a标签中的）*/
        text-decoration: none;
        font-size:10px;
        color: blue;
        
    }
    .book2 .four p{
        font-size: 10px;
        margin: 5px;
    }
    .book2 .one {/*第二本书的封面属性*/
        background:url(img/book-02.jpg);
        height: 120px;
        background-repeat: no-repeat;/*不平铺*/
        margin-top: 20px;/*封面的外边距*/
        margin-right: 10px;/*文字与封面的距离*/
    }
    .book3 .four a{/*第三本书中a标签的文字属性*/
        text-decoration: none;
        font-size:10px;
        color: blue;
    }
    .book3 .four p{
        font-size: 10px;
        margin: 5px;
    }
    .book3 .one {
        background: url(img/book-03.jpg);
        height: 120px;
        background-repeat: no-repeat;
        margin-right: 10px;
        margin-top: 10px;
    }
    .footer{ /*设置最底下的字体属性*/
        color:wheat;
        font-size: 10px;
        margin-top: 10px;
    }
    .wdsd {/*设置三折疯抢那边边框中文字属性*/
        width: 25%;
        float: left;
        text-align: center;
        font-size: 10px;
    }
   
   
    .one{
        width: 20%;
        float: left;
    }
    .two {
        width: 26%;
        float: left;
    }
    
    .book1 {
        margin-top: -60px;
        width: 37%;
        float: left;
    }
   
    .four{
        width: 65%;
        float: left;
        margin-top: 20px;
    }
    
</style>
</head>

<body>
<div class="head">
    <div class="head-left">
        <img src="img/logo.jpg" alt="logo" />
    </div>
    <div class="head-all-right">
        <div class="head-right-top">
            <img src="img/icon_count.png"/>
        </div>
        <div class="sanzhekuang">
            <div class="wdsd">
                <div class="head-right" style="height:50px;width: 70px;">
                    <a>唯品会</a>
                </div>
            </div>
            <div class="wdsd">
                <div class="head-right" style="height:30px;width: 70px;">
                    <a>当当优品</a>
                </div>
            </div>
            <div class="wdsd">
                <div class="head-right" style="height:30px;width: 70px;">
                    <a>数字管</a>
                </div>
            </div>
            <div class="wdsd">
                <div class="head-right" style="height:30px;width: 70px;">
                    <a>都看乐器</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="debk">
    <div class="gexiang">
        <div class="pinzhong">
            <a>首页</a>
        </div>
        <div class="pinzhong">
            <a>图书</a>
        </div>
        <div class="pinzhong">
            <a>音像</a>
        </div>
        <div class="pinzhong">
            <a>服装</a>
        </div>
        <div class="pinzhong">
            <a>鞋靴</a>
        </div>
        <div class="pinzhong">
            <a>运动</a>
        </div>
        <div class="pinzhong">
            <a>箱包</a>
        </div>
        <div class="pinzhong">
            <a>美妆</a>
        </div>
        <div class="pinzhong">
            <a>珠宝</a>
        </div>
        <div class="pinzhong">
            <a>家居</a>
        </div>
        <div class="pinzhong">
            <a>食品</a>
        </div>
        <div class="pinzhong">
            <a>酒</a>
        </div>
        <div class="pinzhong">
            <a>手机</a>
        </div>
        <div class="pinzhong">
            <a>数码</a>
        </div>
        <div class="pinzhong">
            <a>电脑</a>
        </div>
        <div class="pinzhong">
            <a>家电</a>
        </div>
    
    </div>
    <div class="dsbk">
        <img width="100%" height="100%" src="img/banner.png"/>
    </div>
    <div class="zdbk">
        <div class="two">
            <div class="zdbk1">
                <img src="img/bg_bang.gif" alt="" />
            </div>
            <div class="zdbk2">
                <div class="shu">
                    <img src="img/bookNo1.gif"/>
                </div>
            </div>
        </div>
        <div class="book1">
            <div class="neirong">
               <a>
                    偷影子的人
                </a>
                <p>
                    作者:[法] 马克.李维（Marc Levy）著
                </p>
                <p>
                    出版社:湖南文艺出版社
                </p>
                <p>
                    当当价:￥ 17.90
                </p>
                <p>
                    不知道姓氏的克蕾儿，这就是你在我生命里的角色，我童年时的小女孩，
                    今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望
                    一个老师收班上同学欺负得受托小男孩，因为拥有一种特殊的能力而强大：
                    他能“偷别人的影子”
                </p>
                
            </div>
        </div>
        <div class="book1" style="height: 400px;">
                <div class="three" >
                       
                        </div>
            <div class="book2" >
                <div class="one">
                    <img src="img/bookNo2.gif" />
                    
                </div>
                <div class="four">
                    <a href="#">
                        看见（央视知名记者，主持人蔡静：十年个人成长的告白，中国社会变迁的备忘）
                    </a>
                    <br />
                    <p>
                        作者：蔡静 著
                    </p>
                    <p>
                        出版社：广西师范大学出版社
                    </p>	
                    <p>
                        ￥ 29.4   7.4折
                    </p>
                </div>
            </div>
            <div class="book3" >
                <div class="one">
                    <img src="img/bookNo3.gif"/>
                    
                </div>
                <div class="four">
                    <a href="#">
                        改变孩子先改变自己
                    </a>
                    <br />
                    <p>
                        作者：家荣套 加以 著
                    </p>
                    <p>
                        出版社：作家出版社
                    </p>	
                    <p>
                        ￥ 22.4   7.4折
                    </p>
                </div>
        </div>
    </div>
</div>
<div class="footer">Copyright (C) 当当网 2004-2017, All Rights Reserved <img src="img/validate.gif"/>京ICP证041189号出版物经营许可证 新出发京批字第直0673号</div>
        
</body>
</html>